<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *
        {
            margin:0px;
            padding: 0px;
        }
        .box
        {
            position: relative;
            width: 1200px;
            height: 800px;
            margin: 50px;
            perspective: 1000px;
        }
        img
        {
            position: absolute;
            left: 600px;
            top: 200px;
        }
        .box2
        {
            transform-style: preserve-3D;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box2"></div>
</div>
<script src="../../lib/jquery.min.js"></script>
<script>
    for(var i = 0; i < 98; i++)
    {
        $("<img src='images/d/"+i+".jpg'>").appendTo(".box2");
    }

    //粑粑形状
    //       $("img").each(function (i) {
      //      $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + i * 4 + "px) translateY(" + (i * 6 - 300) + "px)"});
      //     });

   // 相机形状
           $("img").each(function (i) {
            $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + (i * 5) + "px) "});
          });

    //螺旋形状
   // $("img").each(function (i) {
     //   $(this).css({"transform": "rotateY(" + i * 10 + "deg) translateZ(" + 300 + "px) translateY(" + i * 6 + "px)"});
   // });


    //定时器
    var idx = 0;

    setInterval(function () {
        idx++;

        $(".box2").css({"transform" : "rotateY("+idx+"deg)"});
    },20);

</script>
</body>
</html>
